<!--
 * @Author: wwssaabb
 * @Date: 2021-06-12 17:45:13
 * @LastEditTime: 2021-06-15 10:40:31
 * @FilePath: \demo\koa2_demo\demo\websocket_demo.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>websocket_demo</title>
</head>
<body>
  <button class="btn1">连接</button>
  <button class="btn2" disabled='true'>发送数据</button>
  <button class="btn3">关闭连接</button>
  <div>从服务端接收到的数据：<span class="span1"></span></div>
  <script>
    let connect=document.querySelector('.btn1')
    let send=document.querySelector('.btn2')
    let close=document.querySelector('.btn3')
    let ws=null
    connect.onclick=function(){
      ws=new WebSocket('ws://localhost:9998')
      ws.onopen=()=>{
        console.log('连接服务器成功')
        send.disabled=false
      }
      ws.onmessage=msg=>{
        console.log('从服务器接收到的数据')
        console.log(JSON.parse(msg.data))
        let msg_data=JSON.parse(msg.data)
        let data=JSON.parse(msg_data.data)
        console.log(data)
      }
      ws.onclose=()=>{
        console.log('连接服务器失败')
        send.disabled=true
      }
    }
    send.onclick=function(){
      ws.send(JSON.stringify({
        action:'fullScreen',
        socketType:'fullScreen',
        chartName:'trend',
        data:true
      }))
    }
  </script>
</body>
</html>